<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>登录</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<link href="/css/common/common.css" rel="stylesheet" type="text/css">
<script src="/js/common/common.js"></script>
<style type="text/css">
.login-container {
	padding-top: 5rem;
}

.login-btn {
	margin-bottom: 1rem;
}
</style>
</head>

<body>
	<div th:replace="common/header::html"></div>
	<div id="login" v-cloak>
		<div class="page-body">
			<div class="container login-container">
				<form>
					<div class="form-group">
						<label>账号</label> <input type="text" class="form-control" placeholder="请输入账号" v-model="userName">
					</div>
					<div class="form-group">
						<label>密码</label> <input type="password" class="form-control" placeholder="请输入密码" v-model="password">
					</div>
					<button type="button" class="btn btn-danger btn-lg btn-block login-btn" v-on:click="login">立即登录</button>
					<button type="button" class="btn btn-light btn-lg btn-block" v-on:click="footerVM.goTo('/register')">注册</button>
				</form>
			</div>
		</div>
	</div>
	<div th:replace="common/footer::html"></div>
	<script type="text/javascript">
		var loginVM = new Vue({
			el : '#login',
			data : {
				userName : '',
				password : ''
			},
			computed : {},
			created : function() {
			},
			mounted : function() {
				headerVM.title = '登录';
			},
			methods : {
				login : function() {
					var that = this;
					if (that.userName == null || that.userName == '') {
						layer.alert('请输入用户名');
						return;
					}
					if (that.password == null || that.password == '') {
						layer.alert('请输入密码');
						return;
					}
					that.$http.post('/login', {
						username : that.userName,
						password : that.password
					}, {
						emulateJSON : true
					}).then(function(res) {
						window.location.href = '/';
					});
				}
			}
		});
	</script>
</body>
</html>